{% load i18n %}
{% load short_uri %}
 
 <link rel="stylesheet" href="http://www.aliway.com/css/reset.css?t=20130219v1" />
 <script type="text/javascript" src="http://www.aliway.com/js/jquery-1.6.3.min.js"></script>
 <script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy.js,p/global/1.0/global.js"></script>
 
 <head>


 
 </head>


 <body>

   <!--页面css-->

    <style>

        body {

            font: 12px/1.5em 'Microsoft Yahei',Arial,SimSun, 'Hiragino Sans GB', STXihei, sans-serif;

            -webkit-font-smoothing: subpixel-antialiased;

        }

        /** 分页样式 Start **/

        .pagination{clear:both;}

        .pagination a.pg-item, .pagination a.pg-item:link, .pagination a.pg-item:visited,

        .pagination a.pg-prev, .pagination a.pg-prev:link, .pagination a.pg-prev:visited,

        .pagination a.pg-next, .pagination a.pg-next:link, .pagination a.pg-next:visited {

            color: #333;

        }

        .pagination a.pg-item:hover, .pagination a.pg-item:active,

        .pagination a.pg-prev:hover, .pagination a.pg-prev:active,

        .pagination a.pg-next:hover, .pagination a.pg-next:active {

            color: #333;

        }

        .pagination a.pg-disabled, .pagination .pg-skip,

        .pagination a.pg-disabled:link, .pagination a.pg-disabled:hover,

        .pagination a.pg-disabled:visited, .pagination a.pg-disabled:active {

            color: #999;

        }

        .pagination {

            text-align: center;

            margin: 10px 0;

        }

        .pagination .pg-item,

        .pagination .pg-prev, .pagination .pg-next, .pagination .pg-item {

            margin-left: 4px;

            vertical-align: middle;

        }

        .pagination a:hover {

            text-decoration: none;

        }



        .pagination .pg-prev, .pagination .pg-next, .pagination .pg-item {

            display: inline-block;

            *display: inline;

            *zoom: 1;

            border: 1px solid #bfbfbf;

            background-color: #f5f5f5;

            padding: 3px 8px;

        }

        .pagination a.pg-prev, .pagination a.pg-next, .pagination a.pg-item {

            cursor: pointer;

        }



        .pagination .pg-prev:hover, .pagination .pg-next:hover {

            border-color: #c7e5ff;

        }



        .pagination .pg-prev:active, .pagination .pg-next:active {

            border-color: #2f96ff;

        }



        .pagination .pg-current {

            background-color: #68b318;

            font-weight: bold;

            color: white;

            border-color: #60a616;

        }

        .pagination a.pg-item:hover, .pagination a.pg-item:active,

        .pagination .pg-prev:hover, .pagination .pg-prev:active,

        .pagination .pg-next:hover, .pagination .pg-next:active {

            border-color: #60a616;

            background-color: #f5f5f5;

        }



        .pagination .pg-disabled,

        .pagination .pg-disabled:link, .pagination .pg-disabled:hover,

        .pagination .pg-disabled:visited, .pagination .pg-disabled:active {

            background-color: #f4f4f4;

            border-color: #ddd;

            cursor: text;

        }



        .pagination .pg-skip .pg-jump {

            margin-right: 4px;

            padding: 3px 8px;

            border: 1px solid #ddd;



        }

        /** 分页样式 End **/

        .section{

            height:127px;

            float:none;

        }

        .section .header .subnav{

            margin: 8px 0 0px 0;

            background:url(http://img02.taobaocdn.com/tps/i2/T1.Ud_XzpdXXXDnL6a-21-97.png) 0px 0px repeat-x;

            height:97px;

        }

        .section .header .subnav .sec{

            height:97px;

        }

        .os-content {

            width: 980px;

            margin: 0 auto;

        }

        .os-nav{

            height: 23px;

            padding-top:2px;

            background-color: #cc6601;

            position: relative;

            top: -25px;

            clear: both;

            width: 980px;

            margin: 0px auto 0px auto;

        }

        .os-nav li{

            float:left;

            padding:3px 8px;

        }

        .os-nav li.current{

            background-color:#fff;

        }

        .os-nav li.current a{

            color:#003300;

        }

        .os-nav li a{

            color:#fff;

        }

        .os-banner{

            width:1000px;

            margin:0px auto;

            height:150px;

            background:url(http://img02.taobaocdn.com/tps/i2/T14RJ.XqVfXXbIK96R-1263-150.jpg) center top no-repeat;

        }

        .os-banner .os-banner-content{

            width:1000px;

            margin:0px auto;

        }

        .want_opensource{

            width: 300px;

            height: 130px;

            position: relative;

            margin-top: -150px;

            margin-left:700px;

            background: url(http://img01.taobaocdn.com/tps/i1/T16VybXpRXXXahT_rS-300-150.png) no-repeat;

            text-align: center;

            padding-top: 20px;

        }

        .os-iwhat{

          display: block;

          width: 160px;

          height: 40px;

          text-indent: -999em;

          margin-top: 1px;

          margin-left: 63px;

          margin-bottom: 15px;

          background: url(http://img04.taobaocdn.com/tps/i4/T1VEl.XvXeXXaH7y2e-160-40.png)no-repeat;

        }

        .os-sort{

            padding:15px 0px;

            float:left;

            clear:both;

        }

        .os-sort input{

            width: 250px;

            height: 30px;

            border: 1px solid #ededed;

            border-right: none;

            line-height:30px;

            padding-left:3px;

            vertical-align: middle;

        }

        .os-search{

            background: url(http://img03.taobaocdn.com/tps/i3/T1nYd.XstgXXcOGEPi-55-37.jpg) 0px -3px no-repeat;

            width: 55px;

            float: left;

            height: 37px;

            outline: none;

            text-indent:-999em;

        }

        .os-project-list{

             float:left;

             margin-right:-100px;

             clear:both;

             width:980px;

        }

        li.os-project-item{

            background:url(http://img02.taobaocdn.com/tps/i2/T1Rk1XXCtaXXcssfvr-4-8.jpg);

            width:485px;

            height:159px;

            float:left;

            margin:0px 0px 10px 0px;

            color:#b3b3b3;

            line-height: 24px;

            position:relative;

        }

        li.os-project-item div{

            padding:15px;

        }

        .os-project-name{

            color: #f28f4b;

            font-weight: 700;

            font-family:"微软雅黑";

            font-size:20px;

            width: 455px;

            height: 27px;

            overflow: hidden;

            white-space: nowrap;

            -o-text-overflow: ellipsis;

            text-overflow: ellipsis;

        }

        .os-project-owner{

            color:#666666;

            margin-left:10px;

        }

        .os-project-member{

            width: 455px;

            overflow: hidden;

            height: 24px;

            white-space: nowrap;

            -o-text-overflow: ellipsis;

            text-overflow: ellipsis;

            padding:10px 0px;

            background:url(http://img04.taobaocdn.com/tps/i4/T1fqh0XBxgXXayrnTg-455-2.png) no-repeat bottom center;

            margin-bottom:10px;

        }

        .os-project-partintro{

            height:48px;

            overflow:hidden;

        }

        .os-project-allintro{

            display:none;

        }

        .os-project-seeall{

            color:#ec8d4d;

        }

        .os-project-list li:hover,.os-project-list li.hover{

            background-color:#fff;



        }

        .os-project-list li:hover div,.os-project-list li.hover div{

            border:1px solid #fff;



        }

        .os-project-list li:hover .os-project-member,.os-project-list li.hover .os-project-member{

            height:auto;

            white-space:normal;



        }

        .os-project-list li:hover,.os-project-list li.hover{

            z-index:89;

        }

        .os-project-list li:hover div,.os-project-list li.hover div{

            position:top;

            top:0px;

            left:0px;

            z-index:900;

            height:auto;

            background-color:#fff;

            border:1px solid #fcfcfc;

            border-left:1px solid #f4f4f4;

            _border:1px solid #f4f4f4;

            -webkit-box-shadow: rgb(102, 102, 102) 2px 2px 3px;

            box-shadow: rgb(153, 153, 153) 2px 2px 3px;

        }

        .os-project-list li:hover .os-project-allintro,.os-project-list li.hover .os-project-allintro{

            display:block;

        }

        .os-project-list li:hover .os-project-partintro,.os-project-list li.hover .os-project-partintro{

            display:none;

        }

        .os-banner-taocode {

            float: left;

            width: 330px;

            height: 148px;

            margin-left: 353px;

            text-indent: -999em;

        }

    </style>

    <style>

        #J_Slidepic{

            position: relative;

            width: 1000px;

            height: 150px;

            overflow: hidden;

        }

        #J_Slidepic .ks-switchable-nav {

            margin-top:120px;

        	position:relative;

        	float:left;

        	left:50%;
        	
        	display: none;
        	

        }

        #J_Slidepic .ks-switchable-nav li {

            float:left;

            width: 12px;

            height:12px;

            margin-left: 20px;

        	background-color:#cc6601;

        	text-indent:-999em;

        	cursor: pointer;

        	position:relative;

        	right:50%;

        	z-index:2;

        	border-radius: 12px;

        	-moz-border-radius: 12px;

        	-webkit-border-radius: 12px;



        }

        #J_Slidepic .ks-switchable-nav li.ks-active {

        	background-color:#ebeedd;

        }



        #J_Slidepic .ks-switchable-content li {

            height: 150px;

            width:1000px;

            overflow: hidden;

        }



        </style>

  
    <div class="os-banner">
        <div id="J_Slidepic">
 
            <ol class="ks-switchable-content">      
                                                                       <li>
                  <div class="os-banner-content" style="background:url(http://img02.taobaocdn.com/tps/i2/T1Y_SoXqJhXXbHWTQt-1000-150.png) no-repeat;zoom:1;overflow:hidden;">
                                  <a href="http://code.taobao.org/?spm=1.2210765.a2145j7.1" class="os-banner-taocode" target="_blank">Taocode</a>
                             </div>
             </li>
                                          
             
          </ol>
          <ul class="ks-switchable-nav">
                      <li class="">●</li>
                   </ul>
       
        </div>

        <div class="want_opensource">
       		<!-- 	 <a href="http://code.taobao.org" class="os-banner-taocode" target="_blank">Taocode</a> -->
                <a href="http://wf.alibaba-inc.com/new/smartflow/default/index?requesttypename=c_opensource" class="os-iwhat">我要开源</a>
                <p>阿里集团已有</p>
                <p><strong>{{projectCount}}</strong>个开源项目，<strong>{{peopleCount}}</strong>位开源人</p>
        </div>
    </div>
    <div class="os-content">
    
    <form id="prj-search-form" action="/opensource/" method="POST">
      {%csrf_token%}
      <input id="q" name="q" type="hidden" value="{{key_text}}"></input>
    </form>
    
        <div class="os-sort"><span style="float:left;">搜项目：<input type="text" id="key-text" value="{{key_text}}" /></span> <a id="btn-search" href="javascript:;" class="os-search">搜索</a></div>
        <ul class="os-project-list">
        {%for ali in opensources%}
            <li class="os-project-item">
                <div>
                	{%if ali.svnurl.strip%}
                		<a href="{{ali.svnurl}}" target="_blank" class="os-project-name">{{ali.subject}}</a>
                	{%else%}
                		{%if ali.siteurl.strip%}
                			<a href="{{ali.siteurl}}" target="_blank" class="os-project-name">{{ali.subject}}</a>
                		
                		{%else%}
                			<ul class="os-project-name">{{ali.subject}}</ul>
                		{%endif%}
                	{%endif%}
                    <p class="os-project-member">
                        <span>成员：</span>
                        {% for key, value in ali.ownerDict.items%}
                        	{%if value > 0 %}                  	
	                        	<a href='http://www.atatech.org/profile/{{value}}' class="os-project-owner" target="_blank">{{key}}</a>
	                        {%else%}
	                        	<span class="os-project-owner">{{key}}</span>
	                        {%endif%}
                        {%endfor%}
                        {% for key, value in ali.usersDict.items%}
                        	{%if value > 0 %}                  	
	                        	<a href='http://www.atatech.org/profile/{{value}}' class="os-project-owner" target="_blank">{{key}}</a>
	                        {%else%}
	                        	<span class="os-project-owner">{{key}}</span>
	                        {%endif%}
                        {%endfor%}
                 
                    </p>
                    <p class="os-project-partintro">
                        <span>简介：</span>
                        <span>{{ali.content|truncatechars:60}}...
                              <a href="" target="_blank" class="os-project-seeall">查看详情</a>
                        </span>
                    </p>
                    <p class="os-project-allintro">
                        <span>简介：</span>
                        <span>{{ali.content}}
                        </span>
                    </p>
                </div>
            </li>
        {%endfor%}  
        </ul>
         {% include "layouts/page-nav.html" %}
    </div>
	    <script>
    $(document).ready(function(){
    	
        $('#btn-search').click(function () {
        	$('#prj-search-form #q').val($('#key-text').val());
        	$('#prj-search-form').submit();
            });
    	
        $(".os-project-item").mouseover(function(){
            $(this).addClass("hover");
        });
        $(".os-project-item").mouseout(function(){
            $(this).removeClass("hover");
        });
    });
    </script>
        <script>
        KISSY.use("switchable", function (S, Switchable) {
            var s = new Switchable.Slide('#J_Slidepic', {
                switchTo:0,
                effect : 'scrolly',
                autoplay:true,
                easing : 'easeOutStrong'
            });
         });
    </script> 
</body>
